<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Object</title>
  <!-- 引入Vue -->
  <!-- <script type="text/javascript" src="./js/vue.js"></script> -->
</head>

<body>

</body>

<script type="text/javascript">
  // 定义一个对象
  // let person = { name: '张三', sex: '女' };
  // // 作用是监听一个值
  // Object.defineProperty(person, 'sex', {
  //   // 没有配置 enumerable  configurable writable  默认得是true
  //   enumerable: true, // 是否可以枚举
  //   configurable: true, // 是否可以配置   影响得是sex这个属性
  //   writable: false,    // 是否可以修改   
  // value: '妖'        // 定义得是属性得值
  // })
  // delete person.sex; // 删除sex属性
  // console.log(person);
  // 循环打印person   里面的所有属性
  // for (var key in person) {
  //   console.log(key);
  // }
  // person.sex = '男';
  // console.log(person.sex);



  // 定义第二个对象
  let person2 = {
    name: '李四',
    sex: '女',
    say() { console.log('hi'); },
    ssa() { console.log('你好'); }
  };
  // 先把定义对象属性的初始值保存
  person2._sex = person2.sex;// 保存初始值
  // 作用是监听属性得变化    双向的绑定
  Object.defineProperty(person2, 'sex', {
    // 没有配置 enumerable  configurable writable  默认得是true
    enumerable: true, // 是否可以枚举
    configurable: true, // 是否可以配置   影响得是sex这个属性
    // writable: false,    // 是否可以修改   
    // value: '妖'        // 定义的是初始值


    // writable和value不能于setter和getter同时存在 !!!!!


    // 属性访问器   getter   setter
    // 访问sex时get自动被调用
    // 修改sex时set自动被调用
    get() {   // 返回得是sex属性得返回值
      console.log('get方法被调用.........1');
      return person2._sex;
    },
    set(newValue) {   //set设置sex属性得值
      console.log('set方法被调用.........2', newValue);
      // person2.sex = '位置'  // 会导致set无限循环
      // 通过中间属性来修改sex属行得值
      person2._sex = newValue;
    }
  });
  person2.sex = '男';   // 修改sex得值,会触发set
  console.log(person2.sex);    /// 访问sex属性,会触发get
  console.log(person2);
</script>

</html>